<template>
  <van-popup
    get-container="#app"
    :value="value"
    @input="$emit('input', $event)"
    @open="isReport = false"
  >
    <van-cell-group v-if="!isReport">
      <van-cell icon="closed-eye" @click="dislike">不感兴趣</van-cell>
      <van-cell is-link @click="isReport = true">反馈垃圾内容</van-cell>
      <van-cell icon="info-o">拉黑作者</van-cell>
    </van-cell-group>
    <van-cell-group v-else>
      <van-cell icon="arrow-left" @click="isReport = false">返回</van-cell>
      <van-cell>侵权</van-cell>
      <van-cell>色情</van-cell>
      <van-cell>暴力</van-cell>
      <van-cell>低俗</van-cell>
      <van-cell>不适</van-cell>
      <van-cell>错误</van-cell>
      <van-cell>其他</van-cell>
    </van-cell-group>
  </van-popup>
</template>

<script>
import { disLikeByIdApi } from '@/api/homeAPI.js'
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    artId: {
      type: [Number, String]
    }
  },
  data () {
    return {
      // 是否显示上报垃圾内容
      isReport: false
    }
  },
  methods: {
    async dislike () {
      // 发请求用 try catch 捕获不可以预料的错误
      try {
        const { data } = await disLikeByIdApi(this.artId)
        console.log('不喜欢请求的响应参数===>', data) // 返回文章id
        // 成功提示
        this.$toast.success('以后会减少此类推送')
        // 然后子传父 删除文章id对应的文章
        this.$emit('delAriticleById', data.target)
        // 操作成功 关闭Popup组件弹出 语法糖
        this.$emit('input', false)
      } catch (error) {
        this.$toast.fail('不喜欢操作失败')
        console.log('不喜欢请求错误:')
        console.dir(error)
      }
    }
  }
}
</script>

<style scoped lang='less'>
.van-popup {
  width: 80%;
  border-radius: 4px;
}
</style>
